<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../../assets/js/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link type="text/css" rel="stylesheet" href="../../assets/js/plugin/jquery-ui/css/jquery-ui.css" />
        <!--<link href="../../assets/js/plugin/datepicker/css/jquery-datepicker.css" rel="stylesheet" media="screen" />-->
        <!--<link href="../../assets/js/plugin/check/check.css" rel="stylesheet" media="screen" />-->
        <link rel="stylesheet" href="../../assets/css/ace.min.css" />
        <link rel="stylesheet" type="text/css" media="all" href="../../assets/js/date-time/daterangepicker-bs3.css"/>
        <style>
            .controls span.help-inline {
                font-size: 12px;
                color: #999
            }
            .modal-body{max-height: 500px;}
            .form-horizontal .row-fluid .left{
                float: left;
                width: 50%;
                margin: 0px;
                padding: 0px;
            }
            .header{padding-left:20px; margin-top: 20px;}
            .row-fluid{border-bottom: 1px solid #d5e3ef;margin-bottom: 10px}
        </style>

    </head>

    <body>
        <div class="main-container">
            <h4 style="" class='header smaller lighter blue'>应用特征自定义策略</h4>
            <form class="form-horizontal">
                <div class="row-fluid">
                    <div class="left">
                        <div class="control-group">
                            <label class="control-label" for="policy_desc">策略名称:</label>
                            <div class="controls">
                                <input class="policy_desc" name="policy_desc" type="text" id="policy_desc" placeholder="" required>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="AppType">自定义应用所属应用类型：</label>
                            <div class="controls">
                                <select class="AppType" id="AppType">
                                    <option value="0">未识别应用</option>
                                    <option value="1">Web 视频类</option>
                                    <option value="2">其它 Web 类</option>
                                    <option value="3">P2PStream</option>
                                    <option value="4">P2PDownload</option>
                                    <option value="5">VideoStream</option>
                                    <option value="6">Download</option>
                                    <option value="7">Email </option>
                                    <option value="8">IM</option>
                                    <option value="9">Game</option>
                                    <option value="10">VoIP </option>
                                    <option value="11">电信自营</option>
                                    <option value="12">其它</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="left">
                        <div class="control-group">
                            <label class="control-label" for="AppID">自定义的应用编号：</label>
                            <div class="controls">
                                <input class="AppID" value="0" name="AppID" type="text" id="AppID" required/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="AppName">自定义应用名称：</label>
                            <div class="controls">
                                <input type="text"  id="AppName" name="AppName" class="AppName">
                            </div>
                        </div>
                    </div>
                </div>
                <!--自定义应用特征组-->
                <div class=" row-fluid MSrcIP">
                    <div>
                        <a class="btn btn-small MSrcIPSegment" href="javascript:void(0)" onclick="addCustomFutherBox()">添加自定义应用特征</a>
                    </div>
                    <table class="table table-condensed AppFuther">
                        <thead>
                            <tr>
                                <th>协议</th>
                                <th>源IP</th>
                                <th>源端口</th>
                                <th>目地IP</th>
                                <th>目的端口</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class=" row-fluid">
                    <div class="control-group" style=" margin-left: -200px;">
                        <div class="controls">
                            <a href="javascript:void(0)" class="btn btn-primary" onclick="edit()">&nbsp;保&nbsp;存&nbsp;</a>
                            <a href="javascript:void(0)" class="btn btn-danger" onclick="previous()">&nbsp;取&nbsp;消&nbsp;</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class='modal fade' id='KeyWordModal' tabindex='-1' role='dialog' aria-labelledby='KeyWordModalLabel' aria-hidden='true'>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span></button>
                        <h4 class='modal-title' id='KeyWordModalLabel'>应用特征关键字</h4>
                    </div>
                    <div class='modal-body'>
                        <form class="form-horizontal">
                        <div class="row-fluid">
                            <div class=' row-fluid'>
                                <div class='control-group'>
                                    <label class="control-label" for="offsetBase">偏移起始位置:</label>
                                    <div class="controls">
                                        <select class="offsetBase" name="offsetBase" id="offsetBase" placeholder="" required>
                                            <option value="0">从TCP/UDP载荷头起算</option>
                                            <option value="1">从TCP/UDP载荷尾倒算</option>
                                        </select>
                                    </div>
                                </div>
                                <div class='control-group'>
                                    <label class="control-label" for="offset">偏移量:</label>
                                    <div class="controls">
                                        <input class="offset" name="offset" type="text" id="offset" placeholder="" required>
                                    </div>
                                </div>
                                <div class='control-group'>
                                    <label class="control-label" for="keyword">关键字:</label>
                                    <div class="controls">
                                        <input class="keyword" name="keyword" type="text" id="keyword" placeholder="" required>
                                    </div>
                                </div>
                                <div class='contro-group'>
                                    <label class='control-label'></label>
                                    <div class='controls'>
                                        <a href="javascript:void(0);" class="btn btn-primary" onclick="addKeyWord()">&nbsp;添&nbsp;加&nbsp;</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                        
                        <!-- 关键字列表 -->
                        <div class=" row-fluid MSrcIP">
                            <table class="table table-condensed KeyWordTable">
                                <thead>
                                    <tr>
                                        <th>偏移位置</th>
                                        <th>偏移量</th>
                                        <th>关键字</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href='javascript:void(0)' class='btn btn-default' onclick='closeKeyWordBox()'>关闭</a>
                    </div>
                </div> 
            </div>
        </div>

        <script src="../../assets/js/jquery.js"></script>
        <script src="../../assets/js/plugin/bootstrap/js/bootstrap.min.js"></script>
        <script type='text/javascript' src="../../assets/js/plugin/jquery-ui/jquery-ui.js"></script>
        <!--<script src="../../assets/js/plugin/datepicker/js/jquery-datepicker.js"></script>-->
        <script src="../../assets/js/date-time/moment.js"></script>
        <script src="../../assets/js/date-time/daterangepicker.js"></script>
        <script src="../../assets/js/plugin/menu/menu.js"></script>
        <script src="../../assets/js/jquery.validate.js"></script>
        <script src="../../assets/js/jquery.validate-util.js"></script>
        <!--<script src="../../assets/js/logic/overlayer.js"></script>-->
        <script src="../../assets/js/Base64.js"></script>
        <script src="logic.js"></script>
        <script type='text/javascript'>
            var id = getQueryString("id");
            $(function () {
                $.ajax({
                    method:"POST",
                    async: false,
                    url: "../../action/policy/get.do",
                    dataType: "json",
                    data: {type: type, messageNo: id, instance: DepotName},
                    success: showData
                });
            });
        </script>
    </body>
</html>
